<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notion 风格页面原型 - Tailwind CSS</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 font-sans">
    <!-- 整体布局容器 -->
    <div class="flex h-screen">
        <!-- 侧边栏 -->
        <aside class="w-64 bg-white shadow-md h-full fixed lg:static hidden lg:block">
            <div class="p-4">
                <h2 class="text-xl font-bold text-gray-800">工作区</h2>
                <nav class="mt-4">
                    <ul class="space-y-2">
                        <li>
                            <a href="#" class="block p-2 text-gray-700 hover:bg-gray-200 rounded">主页</a>
                        </li>
                        <li>
                            <a href="#" class="block p-2 text-gray-700 hover:bg-gray-200 rounded">任务</a>
                        </li>
                        <li>
                            <a href="#" class="block p-2 text-gray-700 hover:bg-gray-200 rounded">笔记</a>
                        </li>
                        <li>
                            <a href="#" class="block p-2 text-gray-700 hover:bg-gray-200 rounded">数据库</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </aside>

        <!-- 主内容区域 -->
        <main class="flex-1 ml-0 lg:ml-64">
            <!-- 顶部工具栏 -->
            <header class="bg-white shadow p-4 flex justify-between items-center">
                <div class="flex items-center space-x-2">
                    <button class="lg:hidden p-2 text-gray-600 hover:text-gray-800" id="menu-toggle">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                        </svg>
                    </button>
                    <h1 class="text-xl font-semibold text-gray-800">Break All</h1>
                </div>
                <div class="flex space-x-4">
                    <button class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-200 rounded">分享</button>
                    <button class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-200 rounded">导出</button>
                    <button class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-200 rounded">搜索</button>
                </div>
            </header>

            <!-- 内容区域 -->
            <div class="p-6 max-w-4xl mx-auto">
                <!-- 示例文本块 -->
                <div class="bg-white p-4 rounded-lg shadow mb-4">
                    <h2 class="text-lg font-bold text-gray-800 mb-2">欢迎使用</h2>
                    <p class="text-gray-600">这是一个示例页面，展示了 Notion 的基本布局。你可以在这里添加笔记、任务或其他内容。</p>
                </div>

                <!-- 示例表格块 -->
                <div class="bg-white p-4 rounded-lg shadow mb-4">
                    <h3 class="text-md font-semibold text-gray-800 mb-2">任务列表</h3>
                    <table class="w-full text-left">
                        <thead>
                            <tr class="border-b">
                                <th class="py-2 text-gray-700">任务</th>
                                <th class="py-2 text-gray-700">状态</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="border-b">
                                <td class="py-2 text-gray-600">完成原型设计</td>
                                <td class="py-2 text-green-600">已完成</td>
                            </tr>
                            <tr>
                                <td class="py-2 text-gray-600">测试功能</td>
                                <td class="py-2 text-yellow-600">进行中</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 示例代码块 -->
                <div class="bg-white p-4 rounded-lg shadow">
                    <h3 class="text-md font-semibold text-gray-800 mb-2">代码片段</h3>
                    <pre class="bg-gray-800 text-white p-4 rounded"><code>console.log("Hello, Notion!");</code></pre>
                </div>
            </div>
        </main>

        <!-- 移动端抽屉菜单 -->
        <div class="fixed inset-0 bg-gray-800 bg-opacity-75 hidden" id="mobile-menu">
            <div class="w-64 bg-white h-full p-4">
                <button class="p-2 text-gray-600 hover:text-gray-800" id="menu-close">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
                <nav class="mt-4">
                    <ul class="space-y-2">
                        <li><a href="#" class="block p-2 text-gray-700 hover:bg-gray-200 rounded">主页</a></li>
                        <li><a href="#" class="block p-2 text-gray-700 hover:bg-gray-200 rounded">任务</a></li>
                        <li><a href="#" class="block p-2 text-gray-700 hover:bg-gray-200 rounded">笔记</a></li>
                        <li><a href="#" class="block p-2 text-gray-700 hover:bg-gray-200 rounded">数据库</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <!-- 简单脚本实现移动端菜单切换 -->
    <script>
        const menuToggle = document.getElementById('menu-toggle');
        const menuClose = document.getElementById('menu-close');
        const mobileMenu = document.getElementById('mobile-menu');

        menuToggle.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });
        menuClose.addEventListener('click', () => {
            mobileMenu.classList.add('hidden');
        });
    </script>
</body>
</html>